<style>
    .build-jia-default {
        border: none;
    }

    .build-jia-default .panel-jia-heading {
        background: none;
        border-bottom: 1px solid #f2f2f2;
        margin-left: 21px;
        margin-right: 21px;
    }

    .panel-jia-title {
        color: #333;
    }

    .tab-jia-default .tab-content {
        padding: 30px 20px;
        height: auto;
        overflow: hidden;
    }

    .panel-block-jia-body {
        padding: 22px 52px 52px;
    }

    .form-jia-line {
        padding-bottom: 16px;
        border-bottom: 1px solid #f2f2f2;
    }

    .view-jia-tit {
        color: #5c72e9;
    }

    .view-jia-tit:hover {
        color: #4960e6
    }

    .tab-jia-default li.active .nav-link, .tab-jia-default li.active .nav-link:focus, .tab-jia-default li.active .nav-link:hover {
        color: #5c72e9;
        padding: 10px 23px;
    }

</style>
<div class="buildcreat">
    <!--<div class="loader" ng-if="!labusername">-->
    <!--<div class="loader-inner ball-clip-rotate-multiple">-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--</div>-->
    <!--</div>-->
    <div>
        <form class="form-horizontal" name="frm">
            <div>
                <div class="panel panel-default build-jia-default">
                    <div class="panel-heading panel-jia-heading">
                        <span class="panel-title panel-jia-title">新建构建</span>
                    </div>
                    <div class="panel-body panel-block-jia-body">
                        <div class="form-group form-jia-line">
                            <label class="col-sm-2 control-label text-left"
                                   style="color: #333; font-size:14px;font-weight:normal;text-align: left;">构建名称</label>
                            <div class="col-sm-10" style="padding-right: 40px">
                                <input ng-model="buildConfig.metadata.name"
                                       ng-blur="nameblur()"
                                       onkeypress="if((event.keyCode > 31 && event.keyCode < 44) || (event.keyCode > 46 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97))event.returnValue = false;"
                                       ng-focus="namefocus()"
                                       type="text" name="name" class="form-control"
                                       required
                                       placeholder="例如：datafoundry"
                                       style="ime-mode:disabled">
                                <small ng-if="namerr.nil" class="fa fa-info-circle err-tip">请输入正确构建名称
                                </small>
                                <small ng-if="namerr.rexed" class="fa fa-info-circle err-tip">
                                    请输入4~30位名称,名称只能包含英文、数字以及“-”
                                </small>
                                <small ng-if="namerr.repeated" class="fa fa-info-circle err-tip">输入的名称已重复
                                </small>
                            </div>
                        </div>

                        <div class="form-group form-jia-line">
                            <label class="col-sm-2 control-label"
                                   style="color: #5a6378; font-size:14px; text-align: left;font-weight:normal;">代码URL</label>
                            <div class="col-sm-10">
                                <uib-tabset class="tab-default tab-jia-default" active="check">
                                    <!--gitlab-->
                                    <!--<uib-tab index="1" ng-if="false" heading="代码仓库" ng-click="checkdTab(1)">-->
                                    <!--<div class="tabinfo" style="height: 50px">-->
                                    <!--<a class="btn pull-right" ng-class="{'running':labrunning}" uib-tooltip="同步代码源"-->
                                    <!--ng-click="loadlabOwner()" style="margin-top: -5px; margin-right: -10px">-->
                                    <!--<i class="fa fa-green fa-lg fa-refresh"></i>-->
                                    <!--</a>-->
                                    <!--<img style="float: left;margin-right: 20px;"-->
                                    <!--src="views/build_create_new/img/images02_178.png">-->
                                    <!--<span style="font-size:12px; height: 20px">DataFoundry 提供的代码仓库（<a href="https://code.dataos.io" target="view_window" class="view-jia-tit">https://code.dataos.io</a>）是可靠的自托管的 Git 项目仓库，-->
                                    <!--可通过Web 界面进行访问公开的或者私人项目。</span>-->
                                    <!--</div>-->
                                    <!--</uib-tab>-->
                                    <!--github-->
                                    <uib-tab index="2" heading="GitHub" ng-click="checkdTab(2)">
                                        <div class="tabinfo" style="height: 50px">
                                            <a class="btn pull-right" ng-class="{'running':runninghub}"
                                               uib-tooltip="同步代码源"
                                               ng-click="refresh()" style="margin-top: -5px; margin-right: -10px">
                                                <i class="fa fa-green fa-lg fa-refresh"></i>
                                            </a>
                                            <img style="float: left;margin-right: 20px;"
                                                 src="views/build_create_new/img/github.png">
                                    <span style="font-size:12px; height: 20px">Github 于 2008 年上线，目前，除了 Git 代码仓库托管以及基本的 Web 管理界面以外 、 还提供了订阅 、讨论组 、文本渲染 、
                                    在线文件编辑器 、协作图谱（报表） 、代码片段分享（Gist）等功能。</span>
                                        </div>
                                    </uib-tab>

                                    <uib-tab index="3" heading="Git仓库" ng-click="checkdTab(3)">
                                        <form class="form-horizontal">
                                            <p style="font-size: 12px;padding-bottom: 10px">如果是私有代码库，需要输入用户名口令。</p>
                                            <div class="form-group">
                                                <label for="address" class="col-md-3 control-label require"
                                                       style="text-align: left; font-size: 12px; font-weight: normal">仓库地址</label>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control" id="address"
                                                           style="height: 30px; margin-left: -20px"
                                                           ng-model="buildConfig.spec.source.git.uri">
                                                    <small style="margin-left: -20px;" ng-if="repoerr"
                                                           class="fa fa-info-circle err-tip">请输入仓库地址
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="address" class="col-md-3 control-label"
                                                       style="text-align: left; font-size: 12px; font-weight: normal">Dockerfile路径</label>
                                                <div class="col-md-9">
                                                    <input type="text" placeholder="" class="form-control" id=""
                                                           style="height: 30px; margin-left: -20px"
                                                           ng-model="buildConfig.spec.source.contextDir">
                                                </div>
                                            </div>
                                            <div class="form-group" style="margin-top: 30px">
                                                <label for="username" class="col-md-3 control-label"
                                                       style="text-align: left; font-size: 12px; font-weight: normal">用户名</label>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control" id="username"
                                                           style="height: 30px; margin-left: -20px"
                                                           ng-model="sername.name">
                                                </div>
                                            </div>
                                            <div class="form-group" style="margin-top: 30px">
                                                <label for="pwd" class="col-md-3 control-label text-left"
                                                       style="text-align: left; font-size: 12px; font-weight: normal">口令</label>
                                                <div class="col-md-9">
                                                    <input type="password" class="form-control" id="pwd"
                                                           style="height: 30px; margin-left: -20px"
                                                           ng-model="sername.pwd">
                                                </div>
                                            </div>
                                        </form>
                                    </uib-tab>
                                </uib-tabset>

                                <div class="is-box" ng-hide="grid.ishide">

                                    <div class="panel panel-default first col-md-4" style="margin-right:32px">
                                        <div class="panel-heading">
                                            <img src="views/build_create_new/img/user.png">
                                            用户/组织
                                        </div>
                                        <div class="panel-body">
                                            <ul>
                                                <li class="labcon" ng-repeat="user in usernames" ng-show="!user.hide">
                                                    <a href="javascript:;" uib-tooltip="{{user.login}}"
                                                       ng-class="{'active': grid.user == $index}"
                                                       ng-click="selectUser($index,'choose')">
                                                        <i class="faa faa-check"></i>&nbsp;&nbsp;{{user.login}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel panel-default col-md-4"
                                         style="margin-right:36px;position: relative;">
                                        <div class="panel-heading">
                                            <img src="views/build_create_new/img/project.png">
                                            项目
                                        </div>
                                        <div class="searchbar"
                                             style="border-left: none;border-right: none;position: relative; top: 0;left:0;width: 100%;">

                                            <div class="input-group">
                                                <input type="text" class="form-control"
                                                       ng-model="txt"
                                                       placeholder="搜索关键字">
                                <span class="input-group-btn" style="right:14px;top:4px;z-index:999;">
                                <a class="btn" ng-click="search(txt)"></a>
                                </span>
                                            </div>


                                        </div>
                                        <div class="panel-body">

                                            <ul style="">
                                                <li class="labcon" ng-repeat="project in reposobj">
                                                    <a href="javascript:;" uib-tooltip="{{project.name}}"
                                                       ng-class="{'active': grid.project == $index}"
                                                       ng-click="selectProject($index,'choose')">
                                                        <i class="faa faa-check"></i>&nbsp;&nbsp;{{project.name}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel panel-default third col-md-4">
                                        <div class="panel-heading">
                                            <img src="views/build_create_new/img/branch.png">
                                            代码分支
                                        </div>
                                        <div class="panel-body">
                                            <ul>
                                                <li class="labcon" ng-repeat="branch in branch">
                                                    <a href="javascript:;" uib-tooltip="{{branch.name}}"
                                                       ng-class="{'active': grid.branch == $index}"
                                                       ng-click="selectBranch($index,'choose')">
                                                        <i class="faa faa-check"></i>&nbsp;&nbsp;{{branch.name}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <small ng-if="frm.branch.$viewValue != '' && frm.branch.$invalid">请选择一个分支</small>
                                </div>



                                <!--gitlab pannel-->
                                <!--<div class="is-box" ng-if="false" ng-show="grid.labcon">-->
                                    <!--<div class="panel panel-default first col-sm-4" style="margin-right:36px">-->
                                        <!--<div class="panel-heading">-->
                                            <!--<img src="views/build_create_new/img/user.png">-->
                                            <!--用户/组织-->
                                        <!--</div>-->
                                        <!--<div class="panel-body">-->
                                            <!--<ul>-->
                                                <!--<li class="labcon" ng-repeat="user in labusername" ng-show="!user.hide">-->
                                                    <!--<a href="javascript:;"-->
                                                       <!--uib-tooltip="{{user.org.name || user.owner.name}}"-->
                                                       <!--ng-class="{'active': grid.user == $index}"-->
                                                       <!--ng-click="selectlabUser($index,'chooose')">-->
                                                        <!--<i class="faa faa-check"></i>&nbsp;&nbsp;{{user.org.name ||-->
                                                        <!--user.owner.name}}-->
                                                    <!--</a>-->
                                                <!--</li>-->
                                            <!--</ul>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="panel panel-default second col-sm-4"-->
                                         <!--style="margin-right:36px;position: relative;">-->
                                        <!--<div class="panel-heading">-->
                                            <!--<img src="views/build_create_new/img/project.png">-->
                                            <!--项目-->
                                        <!--</div>-->
                                        <!--<div class="searchbar"-->
                                             <!--style="border-right: none;border-left: none;position: absolute; top: 54px;left:0;width: 100%;">-->
                                            <!--<div class="input-group">-->
                                                <!--<input type="text" class="form-control"-->
                                                       <!--ng-model="text"-->
                                                       <!--placeholder="搜索关键字">-->
                                <!--<span class="input-group-btn" style="right:14px;top:4px;z-index:999;">-->
                                <!--<a class="btn"></a>-->
                                <!--</span>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--<div class="panel-body">-->

                                            <!--<ul style="margin-top:36px;">-->
                                                <!--<li class="labcon" ng-repeat="project in labobjs">-->
                                                    <!--<a href="javascript:;" uib-tooltip="{{project.name}}"-->
                                                       <!--ng-class="{'active': grid.labproject == $index}"-->
                                                       <!--ng-click="selectLabProject($index, 'chooose')">-->
                                                        <!--<i class="faa faa-check"></i>&nbsp;&nbsp;{{project.name}}-->
                                                    <!--</a>-->
                                                <!--</li>-->
                                            <!--</ul>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="panel panel-default third col-sm-4">-->
                                        <!--<div class="panel-heading">-->
                                            <!--<img src="views/build_create_new/img/branch.png">-->
                                            <!--代码分支-->
                                        <!--</div>-->
                                        <!--<div class="panel-body">-->
                                            <!--<ul>-->
                                                <!--<li class="labcon" ng-repeat="labBranchData in labBranchData.msg">-->
                                                    <!--<a href="javascript:;" uib-tooltip="{{labBranchData.name}}"-->
                                                       <!--ng-class="{'active': grid.labbranch == $index}"-->
                                                       <!--ng-click="selectlabBranch($index,'chooose')">-->
                                                        <!--<i class="faa faa-check"></i>&nbsp;&nbsp;{{labBranchData.name}}-->
                                                    <!--</a>-->
                                                <!--</li>-->
                                            <!--</ul>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--gitLab box-->
                                <!--<div class="gitlabbox" ng-show="grid.gitlabbox" style="margin-top: 20px">-->
                                    <!--&lt;!&ndash;<form class="form-horizontal">&ndash;&gt;-->
                                    <!--<div class="form-group">-->
                                        <!--<label class="col-sm-4 control-label">代码仓库URL</label>-->
                                        <!--<div class="col-sm-8">-->
                                            <!--<input ng-model="psgitlab.host" class="form-control" style="width: 70%">-->

                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="form-group">-->
                                        <!--<label class="col-sm-4 control-label">用户名</label>-->
                                        <!--<div class="col-sm-8">-->
                                            <!--<input ng-model="psgitlab.user" class="form-control" style="width: 70%">-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="form-group">-->
                                        <!--<label class="col-sm-4 control-label">私有Token</label>-->
                                        <!--<div class="col-sm-8">-->
                                            <!--<input ng-model="psgitlab.private_token" class="form-control"-->
                                                   <!--style="width: 70%">-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="form-group">-->
                                        <!--<label class="col-sm-4 control-label"></label>-->
                                        <!--<div class="col-sm-8">-->

                                            <!--<div class="gitlabBtn" ng-click="creatgitlab()">确定</div>-->
                                            <!--<small ng-show="grid.cdm" class="fa fa-exclamation-circle"-->
                                                   <!--style="font-size: 12px;color: #ec6941; margin-top: 10px">&nbsp;{{grid.creatlaberr}}-->
                                            <!--</small>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                    <!--&lt;!&ndash;</form>&ndash;&gt;-->

                                    <!--&lt;!&ndash;-&#45;&#45;gitLab-&ndash;&gt;-->
                                <!--</div>-->
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label"
                                 style="color: #5a6378; font-size:14px; text-align: left;"></div>
                            <div class="col-sm-10">
                                <small ng-if="urlerr" class="fa fa-info-circle err-tip">请选择代码URL
                                </small>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label text-left"
                                   style="color: #5a6378; font-size:14px; text-align: left;font-weight:normal; ">构建超时时长</label>
                            <div class="col-sm-10">
                                <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,'');}).call(this)"
                                       onblur="this.v();" ng-model="completionDeadlineMinutes" name="cdm" min="1"
                                       max="60"
                                       style="width: 80px;display: inline-block;" type="text" class="form-control">
                                <span style="display: inline-block; margin-right: 20px">分钟</span>
                                <span class="font12">&nbsp;&nbsp;请不要超过60分钟</span><br>
                                <small ng-if="timeouted" class="fa fa-exclamation-circle"
                                       style="font-size: 12px;color: #ec6941; margin-top: 10px">&nbsp;您设置的时长超过了限制，请重新设置
                                </small>
                            </div>
                        </div>
                    </div>
                    <a class="btn btn-block"
                       ng-class="{'btn-orange':true}"
                       ng-click="frm.$valid && create()"
                       style="margin-bottom:30px;margin-left:52px;margin-right:52px;width:auto;border-radius:0;">开始构建</a>
                </div>

            </div>

            <!--<a class="btn btn-block" ng-class="{'btn-orange':frm.$valid, 'btn-disabled': frm.$invalid}" ng-disabled="frm.$invalid" ng-click="frm.$valid && create()"><i class="fa fa-spinner fa-spin" ng-if="creating">&nbsp;</i>开始构建</a>-->

        </form>
    </div>
</div>


<style>
    .zhuan {
        animation: rotate 1s infinite linear;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .is-box {
        margin-top: 30px;
    }

    .is-box .panel {
        padding-left: 0px;
        padding-right: 0px;
        width: 30%;
        height: 200px;
    }

    .is-box .panel .panel-heading {
        width: 100%;
        background-color: #f7f7f7;
    }

    .col-sm-10 {
        padding-right: 42px;
    }

    .is-box .panel .panel-body {
        width: 100%;
        padding: 0px;
        margin-bottom: 0px;
        height: 150px;
        overflow-y: auto;
    }

    .is-box .panel .panel-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .is-box .panel .panel-body li {
        height: 40px;
        line-height: 40px;
    }

    .is-box .panel .panel-body ul li a {
        padding: 0px 15px;
    }

    .is-box .panel .panel-body ul li a:active {
        color: #5a6378;
    }

    .is-box .panel .panel-body ul li a:focus {
        text-decoration: none;
    }

    .is-box .panel .panel-body ul li a.active {
        background: #f5f6fa;
        color: #5a6378;
    }

    .is-box .panel .panel-body img {
        margin-right: 10px;
    }

    .gitlabbox {
        width: 100%;
        overflow: hidden;
        border: 1px solid #c9c9c9;
        padding: 40px 0px;
    }

    .gitlabBtn {
        width: 70%;
        height: 34px;
        background: #55c45f;
        line-height: 34px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }

    .gitlabBtn:hover {
        background: #469450;
    }

    .labcon a:link, .labcon a:visited {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .running {
        animation: rotate 1s infinite linear;
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .form-group input {
        width: 100%;
    }
</style>
